<template>
  <div
    ref="alarmPush"
    style="height:100%; background: #f0f0f0"
  >
    <div
      v-show="alarmPushList.length == 0"
      class="no-data"
    >
      <div class="no-data-container">暂无数据</div>
    </div>
    <div
      v-show="alarmPushList.length !== 0"
      v-for="(item, index) in alarmPushList.filter((alarm,alarmIndex) => alarmIndex<3)"
      :key="index"
      class="item-part"
      ref="itemPart"
    >
      <div
        class="push-container"
        @click="toAlarmHistory"
      >
        <div class="push-header">
          <div>设备序列号：{{ item.id }}</div>
          <div>设备状态： <span
              :style="{color: getDeviceStatusColor(item.alarmLevel)}">{{ getDeviceStatusDisplay(item.alarmLevel ) }}</span>
          </div>
        </div>
        <div class="push-value">
          <div class="push-value-name">
            <span class="alarm-push-svg">
              <svg-icon icon-class="device"></svg-icon>
            </span>
            <span class="alarm-push-name">{{ item.name }}</span>
          </div>
          <div class="alarm-push-cont-right">
            <div
              class="alarm-push-level"
              :style="{'background-color': getDeviceStatusColor(item.alarmLevel)}"
            ></div>
            <div class="alarm-push-data">{{ item.data }} </div>
            <div class="alarm-push-unit">{{ item.unit }}</div>
          </div>
        </div>
        <div class="alarm-push-update">更新时间：{{ item.updateTime }}</div>
      </div>
    </div>
  </div>
</template> 

<script>
import moment from 'moment';
import { MomentFormat } from '../../../constants/common';
import { getDeviceStatusDisplay, getDeviceStatusColor } from '../service';
import { getAlarmHistoryLatestListApi } from '../../../api/alarmHistory';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';
import io from 'socket.io-client';
export default {
  data() {
    this.socket = null;
    return {
      alarmPushList: []
    };
  },
  watch: {
    alarmPushList: {
      handler(value) {
        if (value) {
          this.dealItemPadding();
        }
      }
    }
  },
  mounted() {
    this.getAlarmRecentPush();
    this.dealItemPadding();
    this.establishWebSocket();
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    getAlarmRecentPush() {
      getAlarmHistoryLatestListApi()
        .then(res => {
          const recentPushList = res.map(push => {
            return {
              id: push.serial_number,
              name: push.name,
              updateTime: moment(push.updated_at).format(MomentFormat),
              data: push.data,
              unit: push.unit,
              alarmLevel: push.status
            };
          });
          this.alarmPushList = this.alarmPushList.concat(recentPushList);
        })
        .catch(error => Message.error(parseError(error)));
    },
    establishWebSocket() {
      this.socket = io(process.env.VUE_APP_BASE_API + '/alarm');
      this.socket.on('connect', _ => {
        this.socket.emit('joinJobRoom', this.$store.state.user.jobData.jobId, res => {
          if (res) return;
          else Message.error('节点不存在');
        });
      });
      this.socket.on('alarmPush', res => {
        const localDeviceAlarmObject = {
          id: push.serial_number,
          name: push.name,
          updateTime: moment(push.updated_at).format(MomentFormat),
          data: push.data,
          unit: push.unit,
          alarmLevel: push.status
        };
        this.alarmPushList.unshift(localDeviceAlarmObject);
      });
    },
    toAlarmHistory() {
      let alarmHistory = this.$router.resolve('/alarm/history');
      window.open(alarmHistory.href, '_blank');
    },
    dealItemPadding() {
      const itemListHeight = this.$refs.alarmPush.clientHeight;
      const paddingValue = (itemListHeight - 20 - 3 * 76) / 6;
      this.$nextTick(() => {
        document.getElementsByClassName('push-container').forEach(element => {
          element.style.paddingTop = paddingValue + 'px';
          element.style.paddingBottom = paddingValue + 'px';
        });
      });
    },
    releaseSocket() {
      this.socket.on('disconnect', _ => {
        console.info('Socket disconnect to web namespace');
      });
      this.socket.close();
      this.socket = undefined;
    },
    onResize() {
      if (this.alarmPushList.length !== 0) this.dealItemPadding();
    },
    getDeviceStatusDisplay,
    getDeviceStatusColor
  },
  beforeDestroy() {
    this.releaseSocket();
    window.removeEventListener('resize', this.onResize);
  }
};
</script>

<style lang="scss" scoped>
.push-value-name {
  width: calc(33vw - 260px); /*一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;
  color: #a6b0e6;
  font-size: 24px;
}
.no-data {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  &-container {
    color: #636985;
    font-size: 18px;
    font-weight: 800;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.item-part {
  margin-bottom: 10px;
}
.push-container {
  cursor: pointer;
  background-color: #fff;
  // padding: 20px 0 20px 0;
  .alarm-push-cont-right {
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
  .alarm-push-update {
    padding-left: 10px;
    color: #4f506d;
    font-size: 12px;
    margin-top: 5px;
  }
  .push-header {
    display: flex;
    justify-content: space-between;
    color: #4f506d;
    font-size: 12px;
    padding: 0 10px 10px 10px;
  }
  .push-value {
    height: 29px;
    line-height: 26px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    .alarm-push-svg {
      font-size: 24px;
      color: #a6b0e6;
    }
    .alarm-push-name {
      margin-left: 10px;
      font-size: 24px;
      color: #a6b0e6;
    }
    .alarm-push-level {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
    .alarm-push-data {
      height: 20px;
      line-height: 22px;
      margin-left: 10px;
      color: #a6b0e6;
    }
    .alarm-push-unit {
      height: 20px;
      line-height: 22px;
      color: #a6b0e6;
      margin-right: 5px;
    }
  }
}
</style>
